<template>
  <div class="layout">
    <div class="left">
      <div class="left-top">
        <img src="@/assets/img/logo.jpg" alt="">
        <span>外卖商家中心</span>
      </div>
      <LeftMenu />
    </div>
    <div class="right">
      <!-- 面包屑 -->
      <div class="right-title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,index) in breadData" :key="index" :to="{path: item.path}">{{item.title}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="per-info">
          <span>欢迎你，</span>
          <el-dropdown @command="jumpPage">
            <span class="el-dropdown-link">
              <span>{{accInfo.account}}</span> <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="per">个人中心</el-dropdown-item>
              <el-dropdown-item command="quit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <img :src="accInfo.imgUrl">
        </div>

      </div>

      <div class="main">
        <!-- 路由出口 -->

        <router-view></router-view>
      </div>

    </div>

  </div>
</template>

<script>
import LeftMenu from "@/components/LeftMenu.vue";
import storage from "@/utils/storage.js";
import { getInfo_api } from "@/api/user.js";
export default {
  data() {
    return {
      accInfo: {},
      breadData: [],
    };
  },
  components: {
    LeftMenu,
  },
  methods: {
    jumpPage(value) {
      if (value === "per") {
        this.$router.push("/personal");
      } else if (value === "quit") {
        storage.removeSession("tk");
        this.$router.push("/login");
      }
    },
    //获取账号信息
    async getInfo() {
      let res = await getInfo_api();
      this.accInfo = res.data.accountInfo;
      //放入会话存储中
      storage.setSession("accInfo", this.accInfo);
    },
    //处理面包屑
    fliterBread() {
      this.breadData = [];
      this.$route.matched.forEach((item) => {
        if (item.path != "") {
          this.breadData.push({ path: item.path, title: item.meta.title });
        }
      });
    },
  },
  //生命周期-->创建后
  created() {
    this.getInfo();
    this.fliterBread();

    //接
    this.$bus.$on("giveMsg", () => {
      this.getInfo();
    });
  },
  //侦听器-->监听hash的变化
  watch: {
    //为何  这样写？？？？--->语法
    "$route.path"() {
      this.fliterBread();
    },
    //this.$route当前路由对象
    //this.$router全局路由对象
  },
};
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #f0f2f5;
}
.left {
  background-color: #304156;
  width: 200px;

  .left-top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px 0 20px;
    margin: 20px 0 15px;
    color: #fff;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  //深度--可以修改框架的样式
  /deep/.el-menu {
    border: none;
  }
}
.right {
  flex: 1;
  // y轴方向超出滚动--->弹性布局中存在的问题
  overflow-y: scroll;

  .right-title {
    height: 86px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;

    img {
      width: 50px;
      height: 50px;
      vertical-align: middle;
      border-radius: 50%;
      margin-left: 10px;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #000;
    font-size: 18px;
  }
  .el-dropdown-link:hover {
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 14px;
  }
  .main {
    padding: 20px;
  }
}
</style>